<template>
  <div class="setting_page">
    <CommonHeader title="设置" />
    <div class="setting_content page_no_tab_bar">
      <!-- 设置选项 -->
      <ul class="settings_list">
        <li
          v-for="(item, index) in settingsList"
          :key="index"
          @click="goPage(item.path)"
        >
          <div class="left">
            <img :src="item.icon" alt="" />
            <span>{{ item.text }}</span>
          </div>
          <div class="right">
            <span class="font_color" v-if="item.path == 'language'"
              >简体中文</span
            >
            <span class="font_color" v-if="item.path == 'currency'">USD</span>
            <span class="font_color" v-if="item.path == 'clear'">0.00M</span>
            <img src="@/assets/common/go_icon.png" alt="" />
          </div>
        </li>
      </ul>
      <!-- 退出登录按钮 -->
      <div class="operate_btn" @click="goPage('/loginout')">退出登录</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import CommonHeader from "@/components/CommonHeader.vue";
import LanguageIcon from "@/assets/profile/settings/language_icon.png";
import CurrencyIcon from "@/assets/profile/settings/currency_icon.png";
import PrivacyIcon from "@/assets/profile/settings/privacy_icon.png";
import NetworkIcon from "@/assets/profile/settings/network_icon.png";
import PaperIcon from "@/assets/profile/settings/paper_icon.png";
import ClearIcon from "@/assets/profile/settings/clear_icon.png";
import AboutUsIcon from "@/assets/profile/settings/aboutus_icon.png";

// 获取路由对象
const router = useRouter();
// 设置选项列表
const settingsList: any = ref([
  { text: "语言", icon: LanguageIcon, path: "language" },
  { text: "计价货币", icon: CurrencyIcon, path: "currency" },
  { text: "隐私政策", icon: PrivacyIcon },
  { text: "网络检查", icon: NetworkIcon },
  { text: "证书", icon: PaperIcon, path: "certificate" },
  { text: "清理缓存", icon: ClearIcon, path: "clear" },
  { text: "关于我们", icon: AboutUsIcon ,path: "aboutus"},
]);

// 跳转指定页
const goPage = (path: string) => {
  if (!path) return ElMessage.warning("暂未开放!");
  if (path == "/loginout") {
    localStorage.removeItem("token");
    router.push("/login");
  } else if (path == "clear") {
    ElMessage.success("清理成功!");
  } else {
    router.push(`/profile/settings/${path}`);
  }
};
</script>

<style lang="scss" scoped>
.setting_page {
  .setting_content {
    padding-top: 20px;
    .settings_list {
      li {
        display: flex;
        justify-content: space-between;
        padding: 25px 0;
        border-bottom: 1px solid #47494c;
        .left {
          display: flex;
          align-items: center;
          span {
            margin-left: 10px;
          }
        }
        .right {
          display: flex;
          align-items: center;
          span {
            margin-right: 10px;
          }
        }
      }
    }
    .operate_btn {
      margin-top: 50px;
    }
  }
}
</style>
